Ext.define('EUF.view.EyeView', {
	extend: 'Ext.container.Container',
    alias : 'widget.eyeView',
	border: 1,
	shadow : true,
	style : { 
	
			"background-color": 'lightblue'

	},
	//align : 'center',
	layout : 'hbox',
	//height: 26,
    //width: 251,
//	margin: '100 0 0 300',
	//id: 'eyecontainer',

	coord1 :10,
	coord2 :10,
	startSize :40,
	endSize:   100,
	hSpace:    15,
	vDiff:     -25,
	dSize  : this.endSize - this.startSize,
	top   : this.coord1,
	left   : this.coord2,
	hCenter : 10,      // horizontal center of the fisheye
	// vCenter : this.top + this.dSize / 2,  // height at which the images are maximized
	// vTop    : this.vCenter - 100,   // top vertical influence sphere
	// vBottom : this.vCenter + 100,  // bottom vertical influence sphere
						
	initComponent: function() {
        var me = this;
		 
			// this.config = Ext.applyIf(this.config || {}, {
			// startSize: 40,
			// endSize:   100,
			// hSpace:    15,
			// hCenter:   80,
			// vDiff:     -25
			// });
					
							// var coord       = ele.getXY();
		me.dSize      = me.endSize - me.startSize;
		// listeners : {
			// mouseover: {
				// element : el,
				// fn : function() {
					// alert("GFdffs");
				// }
		// }
			
		// }
		me.listeners = {

				afterrender : function(c) {
						me.coord = this.el.getXY();
						console.log(me.coord, this.el);
							me.top        = 510; //me.coord[1];
							me.left       = me.coord[0];
							me.hCenter    = this.el.getWidth() / 2;          // horizontal center of the fisheye
							me.vCenter    = me.top + me.dSize / 2;  // height at which the images are maximized
							me.vTop       = me.vCenter - 100;   // top vertical influence sphere
							me.vBottom    = me.vCenter + 100;  // bottom vertical influence sphere
							var clntY = 460;
							if (clntY < this.vTop || clntY > this.vBottom) {
								//alert('sdgvdsb........');
								return;
							}
							this.el.down('.x-box-inner').setHeight(81);
							var vFactor;
							if (clntY < this.vCenter) {
								vFactor = (clntY - this.vTop) / (this.vCenter - this.vTop); 
							} else {
								vFactor = (this.vBottom - clntY) / (this.vBottom - this.vCenter); 
							}

						var distance = 0;
						var item;
						var totalWidth = -1 * this.hSpace;

						var hFactor, sizeFactor;

						for (var i=0, len=this.items.items.length; i<len; i++) {
							 if (i%2 == 0){
							item = this.items.items[i];
							distance = Math.abs(item.getPosition()[0] + this.left - 12);
							if (distance > 100) {
								hFactor = 0;
								//console.log("666666666666");
							} else {
							//console.log("5555555555555555");
								hFactor = (100 - distance) / 100;
							}

							sizeFactor = vFactor * hFactor;	
							item.sizeFactor = sizeFactor;
							item.newSize = this.startSize + sizeFactor * this.dSize;
							item.newTop  = this.vDiff * vFactor * item.sizeFactor;
							totalWidth   = totalWidth + item.newSize + this.hSpace;
							 }
							
						}
						me.paint(totalWidth);
							
				c.getEl().on('mousemove', function(event) {
					 //console.log(this,this.items.items.length);
					 event = event.browserEvent;
						if (event.clientY < this.vTop || event.clientY > this.vBottom) {
							//alert('sdgvdsb........');
							return;
						}

						var vFactor;
						if (event.clientY < this.vCenter) {
							vFactor = (event.clientY - this.vTop) / (this.vCenter - this.vTop); 
						} else {
							vFactor = (this.vBottom - event.clientY) / (this.vBottom - this.vCenter); 
						}

					var distance = 0;
					var item;
					var totalWidth = -1 * this.hSpace;

					var hFactor, sizeFactor;

					for (var i=0, len=this.items.items.length; i<len; i++) {
						if (i%2 == 0){
						item = this.items.items[i];
						distance = Math.abs(item.getPosition()[0] + this.left - event.clientX);
						if (distance > 100) {
							hFactor = 0;
							//console.log("666666666666");
						} else {
						//console.log("5555555555555555");
							hFactor = (100 - distance) / 100;
						}

						sizeFactor = vFactor * hFactor;	
						item.sizeFactor = sizeFactor;
						item.newSize = this.startSize + sizeFactor * this.dSize;
						item.newTop  = this.vDiff * vFactor * item.sizeFactor;
						totalWidth   = totalWidth + item.newSize + this.hSpace;
						}
						
					}
					me.paint(totalWidth);
				   }, c);
				   
				},
				
				click: function(event) {
				//alert('fdfsfds');
				//console.log(event);
						//alert('in mouse move...');
				
	}
		},		
		
        me.items = [
			
					/* {
						xtype: 'label',
						id: 'lbl1',
						//height: 41,
						text: 'Graphs'
					}, */
					{
						xtype: 'image',
						id: 'img2',
						//margin : '30 0 0 0',
			//			height: 50,
			//			width: 50,
						src: 'images/search_user.png',
						//src: 'http://cdn4.iconfinder.com/data/icons/REALVISTA/project_managment/png/64/task_notes.png',
						 listeners: {
							click: {
								element: 'el', //bind to the underlying el property on the panel
								fn: function(){
									Ext.getCmp('cPanel').layout.setActiveItem(0);
								}
							}
						} 
					},
					{
						xtype: 'label',
						id: 'lbl0',
						//height: 41,
						text: 'Student',
						hidden: true
					}, 
					{
						xtype: 'image',
						id: 'img5',
						//margin : '30 0 0 0',
			//			height: 50,
			//			width: 50,
						src: 'images/DefinedParameters.png',
						listeners: {
							click: {
								element: 'el', //bind to the underlying el property on the panel
								fn: function(){
									Ext.getCmp('cPanel').layout.setActiveItem(1);
								}	
							}
						}
						
					},
					 {
						xtype: 'label',
						id: 'lbl1',
						//height: 41,
						text: 'Help',
						hidden: true
					 }, 
					{
						xtype: 'image',
						id: 'img3',
						//margin : '30 0 0 0',
			//			height: 50,
			//			width: 50,
						src: 'images/Community_Help.png',
						listeners: {
							click: {
								element: 'el', //bind to the underlying el property on the panel
								fn: function(){
									Ext.getCmp('cPanel').layout.setActiveItem(2);
									}	
							}
						}
					},
					 {
						xtype: 'label',
						id: 'lbl2',
						//height: 41,
						text: 'History',
						hidden: true
					}, 				  
					
					{
						xtype: 'image',
						id: 'img6',
						//margin : '30 0 0 0',
			//			height: 50,
			//			width: 50,
						src: 'images/userdetails.png',
						//src: 'http://cdn1.iconfinder.com/data/icons/officeicons/PNG/48/User%20Card.png'
						listeners: {
							click: {
								element: 'el', //bind to the underlying el property on the panel
								fn: function(){
									Ext.getCmp('cPanel').layout.setActiveItem(3); 
								}	
							}
						}
					},
					{
						xtype: 'label',
						id: 'lbl3',
						//height: 41,
						text: 'History',
						hidden: true
					},
					{
						xtype: 'image',
						id: 'img7',
						//margin : '30 0 0 0',
			//			height: 50,
			//			width: 50,
						src: 'images/organization.png',
						//src: 'http://cdn1.iconfinder.com/data/icons/officeicons/PNG/48/User%20Card.png'
						listeners: {
							click: {
								element: 'el', //bind to the underlying el property on the panel
								fn: function(){
									Ext.getCmp('cPanel').layout.setActiveItem(4); 
								}	
							}
						}
					},
					{
						xtype: 'label',
						id: 'lbl4',
						//height: 41,
						text: 'History',
						hidden: true
					},
					{
						xtype: 'image',
						id: 'img8',
						//margin : '30 0 0 0',
			//			height: 50,
			//			width: 50,
						src: 'images/under-tab.png',
						//src: 'http://cdn1.iconfinder.com/data/icons/officeicons/PNG/48/User%20Card.png'
						listeners: {
							click: {
								element: 'el', //bind to the underlying el property on the panel
								fn: function(){
									Ext.getCmp('cPanel').layout.setActiveItem(5); 
								}
							}
						}
					},
					{
						xtype: 'label',
						id: 'lbl5',
						//height: 41,
						text: 'History',
						hidden: true
					},{
						xtype: 'image',
						id: 'img9',
						//margin : '30 0 0 0',
			//			height: 50,
			//			width: 50,
						src: 'images/master.png',
						listeners: {
							click: {
								element: 'el', //bind to the underlying el property on the panel
								fn: function(){
									Ext.getCmp('cPanel').layout.setActiveItem(6);
									}	
							}
						}
					},
					{
						xtype: 'label',
						id: 'lbl6',
						//height: 41,
						text: 'History',
						hidden: true
					},
					{
						xtype: 'image',
						id: 'img10',
					//	margin : '30 0 0 0',
			//			height: 50,
			//			width: 50,
						src: 'images/charts.png',
						//src: 'http://cdn1.iconfinder.com/data/icons/officeicons/PNG/48/User%20Card.png'
						
							listeners: {
							click: {
								element: 'el', //bind to the underlying el property on the panel
								fn: function(){
								//alert('dd');
									Ext.getCmp('cPanel').layout.setActiveItem(7);
									}	
							}
						
						}
					},
		]		
		me.callParent(arguments);
    },
	paint: function(totalWidth)
	{
	//console.log(totalWidth);
		var xPos = this.hCenter - (totalWidth / 2) ; 
		for (var i=0, len=this.items.items.length; i<len; i++) {
			if (i%2 == 0){
			var item = this.items.items[i];

			this.setImgPos(item, xPos, item.newTop );
			this.setImgSize(item, item.newSize, item.newSize);

			//var x = Ext.query("span", item.parentNode);
			if (item.sizeFactor > this.labelTresholdFactor) {
				this.setPos(x[0], xPos, item.newTop + item.newSize);
				//x[0].style.display = "block";
			} else {
				//x[0].style.display = "none";
			}
			xPos = xPos + item.newSize + this.hSpace;
			}
		}
	},
	setImgSize: function(element, height, width)
	{
	//console.log('SetSize.....');
	//console.log(element);
	element.el.setSize(width+"px", height+"px");
	// element.el.setStyle("width", width);
	// element.el.setStyle("height", height);
		// element.style.width  = width + "px";
		// element.style.height = height + "px";
	},

	setImgPos: function(element, x, y)
	{
	//console.log('SetPos......');
		//console.log(element.el);
		element.el.setStyle("left", x+"px"); //style.left = x + "px";
		element.el.setStyle("top", y+"px"); //style.left = x + "px";
		//element.el.style.top  = y + "px";
	}

})